<script lang="ts">
</script>

<template>
  <div class="app-main">
    <header>
      <nav class="nav">
        <ul>
          <li>实例SSR网站</li>
          <li><a href="/">首页</a></li>
          <li><a href="/about">关于</a></li>
        </ul>
      </nav>
    </header>
    <router-view></router-view>
  </div>
</template>

<style scoped lang="less">
.app-main {
  width: 100%;
  height: 100%;
  position: absolute;

  header {
    width: 100%;
    height: 60px;
  }

  nav {
    width: 100%;
    height: 60px;
    background-color: #000;
    position: fixed;

    ul {
      height: 60px;
      line-height: 60px;
      width: 100%;
    }

    li {
      float: left;
      color: #FFF;
      padding: 0 10px;
    }

    a {
      display: block;
      padding: 0 10px;
      height: 60px;
      line-height: 60px;
      color: #FFF;
      text-decoration: none;

      &:hover {
        color: aqua;
      }
    }
  }
}
</style>
